<template>
  <div>

	<myheader :total_num="total_num()" :total_price="total_price()" :cartlist="cartlist"></myheader>
	

	<section class="featured-block text-center">
		<div class="container">
			<div class="row">
				<div class="col-md-6 text-center">
					<div class="product-image mt-3">
						<!-- 视频 -->
						<video :src="src" muted width="330" controls="controls"></video>
					</div>
					<div class="product-thumbnails"><a href="#">
						<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
						<a href="#">
							<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
						<a href="#">
							<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
						<a href="#">
							<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
						<a href="#">
						<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a></div>
				</div>
				<div class="col-md-6 mt-5 mt-md-2 text-center text-md-left">
					<h2 class="mb-3 mt-0">{{datalist.name}}</h2>
					<p class="lead mt-2 mb-3 primary-color">{{datalist.price | moneyfil}}</p>
					<div>
						简介：<p v-html="datalist.desc"></p>
					</div>
					商品规格:
					<br>
						<p v-if="cate == '食品'">保质：{{parms.保质}}</p>
						<p v-if="cate == '食品'">产地：{{ parms.产地 }}</p>
						<p v-if="cate == '电器'">型号: {{ parms.型号 }}</p>
						<p v-if="cate == '电器'">寿命：{{ parms.寿命 }}</p>
						<p v-if="cate == '衣服'">薄厚：{{ parms.薄厚 }}</p>
						<p v-if="cate == '衣服'">面料：{{ parms.面料 }}</p>

					<!--Quantity: <input type="text" class="form-control quantity mb-4" name="" value="1">-->
					<br><br>
					商品标签：
					<TagInput v-model="mytags" type='string' split=',' placeholder='请输入便签'>

					</TagInput>
					<a href="javascript:;" class="btn btn-full-width btn-lg btn-outline-primary" @click="add_cart">Add to cart</a></div>
					<br><br>
					<!-- 关注数 -->
					<p>该商品已经有<span style="color:blue">{{ flowcount }}人</span>关注了</p>
					<Button v-if="isflow == false" @click="flowsub">关注</Button>
					<Button v-if="isflow == true" @click="noflowsub">取消关注</Button>
			</div>
			<div>
				<p v-for='(item,index) in flowlist' :key="index" style="text-align:left">用户：{{item.username}} 关注了</p>
			</div>
		</div>
	</section>
	
	<div class="divider"></div>

	<section class="products text-center">
		<div class="container">
			
			商品评论: <textarea v-model="content"></textarea>
			<br /><br />
			<Button @click="sub" :disabled="isdisable">确定</Button>
			<br><br>
			<p v-show="iscom">当前还没有评论快来抢沙发吧~~~~~</p>
			<comments :commentlist='commentlist' :userlist='userlist'></comments>
			<!-- <p v-for="(item,index) in commentlist" :key="index">
				用户：{{userlist[index].username}} 评论 {{item.content}}
			</p> -->
			<a @click="getcomment(prev_page)" v-if="prev_page != 0">上一页</a>
			<a v-for="(item,index) in pages" :key="index"  @click="getcomment(item)">{{item}}&nbsp;&nbsp;&nbsp;</a>
			<a @click="getcomment(next_page)" v-if="next_page != last+1">下一页</a>
		</div>
	</section>

	<div class="divider"></div>
	
	<section class="products text-center">
		<div class="container">
			<h3 class="mb-4">Related Products</h3>
			<div class="row">
				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">$19.00</span></p>
				</div>
				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">$19.00</span></p>
		 
		 		</div>
				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">$19.00</span></p>
				</div>
				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">$19.00</span></p>
				</div>
			</div>
		</div>
	</section>
	
	<myfooner></myfooner>
    
  </div>
  
</template>


 
<script>
import myheader from './myheader'
import myfooner from './myfooner'
import {config} from '../config'
import comments from './comments'

export default {
  data () {
    return {
	  gid:this.$route.query.gid,
	  adminurl:config['adminurl'],
	  datalist:{},
	  cate:"",
	  parms:{},
	  src:"",   //头图链接
	  mytags:'',
	  content:"",
	  commentlist:[],    //评论
	  mytags:"",      //所有标签
	  userlist:[],   //评论用户列表
	  iscom:true,  //是否有评论
	  isdisable:false,  //防止恶意评论
	//   分页
	  prev_page:"",
	  next_page:"",
	  pages:[],
	  last:"",
	// 关注list
	  flowlist:[],    //关注user
	  flowcount:0,   //关注数
	//   关注按钮
	  flow:"关注",
	  noflow:"取消关注",
	  isflow:false,
		cartlist:[]

    }
  },
  mounted:function(){
		var cart = JSON.parse(localStorage.getItem('cartlist'))
		if(cart){
			this.cartlist = cart
		}
		
	  this.getitem()
	  this.gettags()
	  this.getcomment(1)
	  this.getflow()
	  this.userisflow()

  
},
  filters:{
	  moneyfil:function(value){

		  return value / 100  + '元'
	  }
  },
  methods:{
		total_price(){
			let total = 0
			for(let i=0;i<this.cartlist.length;i++){
				total += this.cartlist[i].num * this.cartlist[i].price
			}
			return total
		},
		total_num(){
			let total = 0
			for(let i=0;i<this.cartlist.length;i++){
				total += this.cartlist[i].num
			}
			return total
		},
		// 加入购物车
		add_cart(){
			let find = 0

			for(let i=0;i<this.cartlist.length;i++){
				if(this.gid == this.cartlist[i].id){
					this.cartlist[i].num++
					find = 1
					break
				}	
			}

			if(find == 0){
				this.cartlist.push({name:this.datalist.name,id:this.datalist.id,price:this.datalist.price,num:1,img:this.datalist.img})

			}
			localStorage.setItem("cartlist",JSON.stringify(this.cartlist))


		},
	// 判断用户是否登录
	  userisflow(){
		  this.axios.get(this.adminurl+"/userisflow/",{params:{gid:this.gid,uid:localStorage.getItem('uid')}}).then(res=>{
			if(res.data.code == 200){
				this.isflow = true
			}else{
				this.isflow = false
			}
			
		  })
	  },
	//   关注
	  flowsub(){
		  this.axios.get(this.adminurl+"/getflow/",{params:{gid:this.gid,uid:localStorage.getItem('uid'),type:"1"}}).then(res=>{
			
			this.isflow = true
			this.flowlist.push({'username':localStorage.getItem('username')})
			this.flowcount += 1
			 
		  })
	  },
	//   取关
	  noflowsub(){
			this.axios.get(this.adminurl+"/getflow/",{params:{gid:this.gid,uid:localStorage.getItem('uid'),type:"2"}}).then(res=>{
				
				this.isflow = false
				this.flowlist.pop()
				this.flowcount -= 1
				
					
				})
      },
	// 获取商品关注数
	  getflow(){
		  this.axios.get(this.adminurl+"/gidflow/",{params:{gid:this.gid}}).then(res=>{
			
			this.flowlist = res.data
			this.flowcount = res.data.length
			  
		  })
	  },
	// 获取评论用户信息
	  getuserinfo(uid){
		  this.axios.get(this.adminurl+"/userinfo/",{params:{uid:uid}}).then(res=>{
			let data = res.data
			  this.userlist.push({'id':data.id,"username":data.username})
			  
		  })
	  },
	// 获取评论
	  getcomment(page){
		   this.axios.get(this.adminurl+"/commentlist/",{params:{gid:this.gid,"page":page}}).then(res=>{
			//   赋值
			  this.pages = res.data.pages
			  this.prev_page = res.data.prev_page
			  this.next_page = res.data.next_page
			  this.commentlist = res.data.data
			  this.last = res.data.last

			  for(let i=0;i<this.commentlist.length;i++){
				  this.getuserinfo(this.commentlist[i]['uid'])
			  }
			  
		  })
	  },
	//   获取标签
	  gettags(){
		  this.axios.get(this.adminurl+"/gettags/",{params:{id:this.gid}}).then(res=>{

			  this.mytags = res.data.tags.join(',')
			  
		  })
	  },
	  //   获取当前商品信息
	  getitem(){
		  this.axios.get(this.adminurl+"/goods/",{params:{gid:this.gid}}).then(res=>{

			  this.datalist = res.data.data
			  var parms = res.data.data.params
			  this.parms = JSON.parse(parms)
			  this.cate = res.data.cate
			  this.src = this.adminurl+'/static/upload/'+this.datalist.video

			  
		  })
	  },
	  sub(){
		  if(this.content == ''){
			  this.$Message('评论内容不能为空')
			  return false
		  }
		  this.isdisable = true
		  setTimeout(()=>{
			  this.isdisable = false
			  
		  },2000)

		  this.axios.post(this.adminurl+"/insertcomment/",this.qs.stringify({content:this.content,uid:localStorage.getItem('uid'),gid:this.gid})).then(res=>{
			  

			  if(res.data.code == 200){
				  this.$Message('添加成功')
				  this.userlist.unshift({'id':localStorage.getItem('uid'),"username":localStorage.getItem('username')})
				  this.commentlist.unshift({'content':this.content})
				  this.content = ''

			  }else{
				  this.$Message('评论不能过于频繁')
			  }
			  
		  })
	  }
     
},
components:{
	"myheader":myheader,
	"myfooner":myfooner,
	'comments':comments

},




}



</script>
 
<style>



</style>